<template>
	<view class="page-box">
		<view class="background-box">
			<image src="../../static/img/back-img.jpg" class="back-img"></image>
		</view>

		<view class="progress-box">
			<progress :percent="(nowIndex + 1) / question_Bank.length * 100" active stroke-width="10" class="progress"
				border-radius="18" backgroundColor="#FFF" activeColor="#FFD100" active-mode="forwards" />
			<view class="progress-details">{{nowIndex + 1}} / {{question_Bank.length}}</view>
		</view>
		<view class="pageBox" v-for="(item,index) in current_Back" :class="{ 
			aniSmall:nowIndex+1 == index && !isNext , 
			aniBig: nowIndex == index && isNext , 
			aniNext:nowIndex-1 == index && isNext , 
			aniBack:nowIndex == index && !isNext 
		}" v-if="nowIndex == index || nowIndex-1 == index || nowIndex+1 == index" :key="index">
			<view class="page-header">{{formatPage(item.id)}}</view>
			<view class="content">
				<view class="title-box">
					<view class="title">{{item.title}}</view>
				</view>
				<view class="data-content">
					<view class="data-box" v-for="(item2,index2) in item.answer" :key="index2" @click="mNext(index2)">
						<view class="data">{{item2.data}}</view>
						<image src="../../static/img/select.png" class="chouse-btn-img"
							v-if="item.result === item2.res"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="prevBtn" @click="mBack"
			v-if="nowIndex!=0 && !(nowIndex + 1 >= question_Bank.length && question_Bank[nowIndex].result !== '')">返回上一题
		</view>
		<view class="get-res-box" v-if="nowIndex + 1 >= question_Bank.length && question_Bank[nowIndex].result !== ''">
			<view class="res-btn" @click="getResult()">获取测试结果</view>
			<!-- <view class="res-tips">观看完广告即可获取性格分析和适合职业</view> -->
			<view class="res-tips">获取性格分析和适合职业</view>
		</view>
	</view>
</template>

<script>
	import TipsMessageDialog from '@/components/TipsMessageDialog'
	const util = require('../../util/util.js')

	export default {
		name: 'answer',
		components: {
			TipsMessageDialog
		},
		data() {
			return {
				question_Bank: [],
				current_Back: [],
				nowIndex: 0,
				isNext: true,
				number: 1,
				advertisementStatus30: false,
				advertisementStatus60: false,
				tipsMessageDialogStatus: false,
				systemObj: {},
				payStatus: false,
				isResult: false,
			}
		},
		onLoad(options) {
			this.number = options.number
			if (options.number == 1) {
				let {
					questionBank28
				} = require('@/doc/questionBank')
				questionBank28.forEach(element => {
					element.result = ''
				})
				this.question_Bank = questionBank28
			} else {
				let {
					questionBank93
				} = require('@/doc/questionBank')
				questionBank93.forEach(element => {
					element.result = ''
				})
				this.question_Bank = questionBank93
			}

			if (this.question_Bank.length > 0) this.current_Back.push(this.question_Bank[0])

			uni.showShareMenu({
				path: '/pages/index/index',
				success(res) {
					console.log(`showShareMenu 调用成功`);
				},
				fail(res) {
					console.log(`showShareMenu 调用失败`);
				},
			});
		},
		created() {
			this.systemObj = this.$store.state.systemObj
			this.payStatus = this.$store.state.payStatus
		},
		methods: {
			onShareAppMessage() {
				let path = '/pages/index/index'
				return {
					path,
					templateId: 'glo725gg2dj70ekjd0',
					success(res) {
						uni.hideShareMenu({
							success(res) {
								console.log(`showShareMenu 调用成功`);
							},
							fail(res) {
								console.log(`showShareMenu 调用失败`);
							},
						});
					},
					fail(err) {
						console.log(err);
					},
				};
			},

			formatPage(page) {
				return Number(page) >= 10 ? String(page) : '0' + String(page)
			},
			mNext: util.throttle(function(index) {
				this.question_Bank[this.nowIndex].result = this.question_Bank[this.nowIndex].answer[index].res
				if (this.nowIndex >= this.question_Bank.length - 1) return
				this.isNext = true;
				this.nowIndex += 1
				this.current_Back.push(this.question_Bank[this.nowIndex]);
			}, 600),
			mBack: util.throttle(function(e) {
				this.isNext = false;
				if (this.nowIndex > 0) {
					this.nowIndex--;
					setTimeout(() => {
						this.current_Back.splice(-1, 1)
					}, 600)
				} else {

				}
			}, 600),
			async getResult() {
				if (!this.isResult) {
					console.log("XXXXXXXXX", this.isResult)
					this.isResult = true
					let res = ''
					this.question_Bank.forEach(elemnt => {
						res += elemnt.result
					})

					let res2 = ''
					if (this.number == 1) {
						let array = []
						for (let i = 0; i < 4; i++) {
							array = util.getCharMax(res.substr(i * 7, 7))
							res2 += array[array.length - 1].name
						}
					} else {
						let resObj = util.getCharMax2(res)

						function getMax(obj1, obj2) {
							if (!obj1) return obj2.name
							if (!obj2) return obj1.name

							if (obj1.length > obj2.length) return obj1.name
							else if (obj1.length < obj2.length) return obj2.name
							else return obj2.name
						}

						res2 += getMax(resObj['E'], resObj['I'])
						res2 += getMax(resObj['S'], resObj['N'])
						res2 += getMax(resObj['T'], resObj['F'])
						res2 += getMax(resObj['J'], resObj['P'])
					}
					let mbtiResultObj = this.$store.getters.getMbtiResultObj
					this.$store.commit('setResult', res2);
					if (this.number == 1)
						mbtiResultObj.store28 = res2
					else if (this.number == 2)
						mbtiResultObj.store93 = res2
					this.$store.commit('setMbtiResultObj', mbtiResultObj);
					this.$store.commit('setOpenOccupationStatus', false);
					uni.redirectTo({
						url: "../result/index?res=" + res2,
						success: res => {
							console.log(res)
						},
						fail: () => {},
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		.background-box {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			right: 0rpx;
			bottom: 0rpx;

			.back-img {
				display: block;
				width: 100%;
				height: 100%;
				will-change: transform;
			}
		}

		.progress-box {
			position: relative;

			padding-top: 47rpx;

			.progress {
				position: relative;
				margin: 0 auto;
				width: 660rpx;

				::v-deep .tt-progress-inner {
					background-color: #000 !important;
				}
			}

			.progress-details {
				position: absolute;
				top: 80rpx;
				right: 33rpx;
				padding: 10rpx;
				background: linear-gradient(315deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				border-radius: 25rpx;
			}
		}

		.pageBox {
			position: absolute;
			top: 190rpx;
			left: 50%;
			margin-left: -330rpx;
			padding: 96rpx 62rpx 90rpx 62rpx;
			width: 660rpx;
			height: 800rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(170, 211, 238, 1);
			border-radius: 15rpx;
			box-sizing: border-box;
			transform: scale(.8);

			.page-header {
				position: absolute;
				top: -56rpx;
				left: 50%;
				margin-left: -56rpx;
				width: 112rpx;
				height: 112rpx;
				background: #fff;
				box-shadow: inset 0rpx 8rpx 25rpx 0rpx rgba(48, 140, 205, 0.3), 0rpx 0rpx 25rpx 0rpx rgba(170, 211, 238, 1);
				border: 5rpx solid rgba(255, 255, 255, 1);
				border-radius: 50%;
				font-size: 48rpx;
				color: rgba(35, 140, 215, 1);
				text-align: center;
				line-height: 112rpx;
			}

			.content {
				width: 100%;

				.title-box {
					padding-bottom: 52rpx;
					display: flex;
					justify-content: center;

					.title {
						width: 420rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #212121;
						text-align: center;
					}
				}

				.data-content {
					.data-box {
						position: relative;
						padding: 56rpx 48rpx;
						margin-bottom: 46rpx;
						width: 100%;
						background: rgba(248, 248, 248, 1);
						box-sizing: border-box;
						border-radius: 16rpx;
						font-size: 26rpx;
						color: rgba(33, 33, 33, 1);
						text-align: left;
						display: flex;
						align-items: center;

						.chouse-btn-img {
							position: absolute;
							top: 0rpx;
							right: 0rpx;
							display: block;
							width: 58rpx;
							height: 57rpx;
							will-change: transform;
						}
					}

					.data-box:last-child {
						margin-bottom: 0rpx;
					}
				}
			}
		}


		.aniSmall {
			animation: aniSmall .6s both;
		}

		@keyframes aniSmall {
			0% {
				transform: scale(1);
			}

			95% {
				transform: scale(0.8);
			}
		}

		.aniBig {
			animation: aniBig .6s both;
		}

		@keyframes aniBig {
			0% {
				transform: scale(.8);
			}

			99% {
				transform: scale(1);
			}

			100% {
				transform: scale(1);
			}
		}

		.aniBack {
			animation: aniBack .6s both;
		}

		@keyframes aniBack {
			0% {
				z-index: 999;
				transform: translate(-120%, 50%) scale(.8) rotate(-30deg);
			}

			95% {
				z-index: 999;
				transform: translate(0, 0) scale(1) rotate(0);
			}

			96% {
				z-index: 999;
				transform: translate(0, 0) scale(1) rotate(0);
			}

			100% {
				z-index: 999;
				transform: translate(0, 0) scale(1) rotate(0);
			}
		}

		.aniNext {
			animation: aniNext .6s both;
		}

		@keyframes aniNext {
			0% {
				z-index: 999;
				transform: translate(0, 0) scale(1) rotate(0);
			}

			95% {
				z-index: 999;
				transform: translate(-120%, 50%) scale(.8) rotate(-30deg);
			}

			100% {
				z-index: 999;
				transform: translate(-120%, 50%) scale(.8) rotate(-30deg);
			}
		}

		.prevBtn {
			position: absolute;
			left: 50%;
			top: 1050rpx;
			margin-left: -320rpx;
			width: 640rpx;
			height: 80rpx;
			background: linear-gradient(315deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
			border-radius: 15rpx;
			font-size: 26rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 80rpx;
		}

		.get-res-box {
			position: absolute;
			top: 1020rpx;
			left: 0rpx;
			right: 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.res-btn {
				width: 660rpx;
				height: 100rpx;
				background: linear-gradient(270deg, rgba(0, 150, 255, 1) 0%, rgba(60, 179, 255, 1) 100%);
				border-radius: 15rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 100rpx;
			}

			.res-tips {
				margin-top: 14rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
	}
</style>
